<template>
	<view>
		<navBarView></navBarView>
		<navBar navBarTitle="咨询中心" bg="#f0f2f5" @rightIconChange="openPopup"></navBar>
		<view class="tab-block">
			<scroll-view :scroll-x="true" class="left-tab-option">
				<view class="tab-item" @click="tabItemClick(item.id, index)" v-for="(item, index) in lst" :key="index">
					<view class="item-option">
						<view class="item-txt" :class="index == tabIndexCurrent ? 'check-item' : 'no-check-item'">
							{{ item.name }}
						</view>
						<view class="item-border-bottom" v-if="index == tabIndexCurrent"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="content-block">
			<view class="item-option" v-for="(item, index) in tabLst" :key="index" @click="detailClick(item)">
				<view class="right-block">
					<view class="txt-option">{{ item.title }}</view>
					<view class="txt-tag">推荐</view>
				</view>
			</view>
			<emty v-if="tabLst.length == 0"></emty>
		</view>
		<view class="fixed-right-block">
			<view class="fixed-icon yuyin" @click="openPopup">
				<image src="@/static/index/yuyin.png" class="img-icon"></image>
				<view class="txt-option">通话</view>
			</view>
			<view class="fixed-icon message" style="margin-top: 32rpx" @click="openPopup">
				<image src="@/static/index/message.png" class="img-icon"></image>
				<view class="txt-option">咨询</view>
			</view>
		</view>
		<sumitPopup ref="submitPopupRef" :classifyArr="courseLst" @submitPopupChange="submitPopupChange"></sumitPopup>
	</view>
</template>

<script>
import navBarView from '../../components/navBarView/navBarView.vue';
export default {
	components: {
		navBarView
	},
	data() {
		return {
			tabIndexCurrent: 0,
			lst: [],
			tabLst: []
		};
	},
	onLoad() {
		this.selectIndexList();
	},
	onShow() {
		this.courseLst = uni.getStorageSync('courseLst');
	},
	methods: {
		openPopup() {
			this.$refs.submitPopupRef.openPopup();
		},
		tabItemClick(id, index) {
			this.tabLst = [];
			this.tabIndexCurrent = index;
			this.$http('common.selectInformationByIndexId', {
				indexId: id,
				adminId: uni.getStorageSync('adminId')
			}).then((res) => {
				console.log('res=======', res);
				if (res.code == 200) {
					this.tabLst = res.data.data;
				}
			});
		},
		submitPopupChange(data) {
			uni.showLoading({
				title: '提交中'
			});
			this.$http('common.addSubmit', {
				...data,
				adminId: uni.getStorageSync('adminId')
			}).then((res) => {
				if (res.code == 200) {
					this.$tools.showMsg('提交成功');
					uni.hideLoading();
					this.$refs.submitPopupRef.clearParam();
					this.$refs.submitPopupRef.closePopup();
					console.log('res======>', res);
				}
			});
		},
		selectIndexList() {
			this.$http('common.selectIndex', {
				adminId: uni.getStorageSync('adminId')
			}).then((res) => {
				if (res.code == 200) {
					res.data.data.forEach((item) => {
						if (item.typeId == 1&&item.type==1) {
							this.lst.push(item);
						}
					});
					this.tabItemClick(this.lst[0].id, 0);
				}
			});
		},
		detailClick(item){
			uni.setStorageSync('consultDetail',item)
			uni.navigateTo({
				url:'/pages/consult/detail'
			})
		}
	}
};
</script>

<style>
page {
	background: #f4f6f8;
}
</style>
<style lang="scss">
.tab-block {
	background: #f0f2f5;
	height: 88rpx;
	display: flex;
	align-items: center;
	padding-top: 16rpx;
	padding-left: 34rpx;
	padding-right: 34rpx;
	padding-bottom: 14rpx;
	position: sticky;
	top: 100rpx;

	.left-tab-option {
		white-space: nowrap;
		// width: 534rpx;
		width: 100%;
		// flex: auto;
		// display: flex;
		// align-items: center;
		height: 88rpx;
		// margin-right: 12rpx;

		.tab-item {
			height: 88rpx;

			font-size: 28rpx;
			position: relative;
			display: inline-flex;

			.item-option {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-right: 82rpx;
			}

			.item-txt {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
			}

			.item-border-bottom {
				position: absolute;
				bottom: 0;
				width: 34rpx;
				height: 6rpx;
				border-radius: 6rpx;
				background: #209e9a;
			}
		}

		.no-check-item {
			font-size: 32rpx;
			color: #2f2525;
		}

		.check-item {
			font-weight: bold;
			font-size: 32rpx;
			color: #2f2525;
		}
	}

	.right-option {
		// flex: none;
		display: flex;
		align-items: center;
		margin-right: 24rpx;

		.icon {
			width: 24rpx;
			height: 24rpx;
		}

		.txt {
			color: #999999;
			padding-left: 10rpx;
			font-size: 24rpx;
		}
	}
}

.content-block {
	margin: 32rpx;

	.item-option {
		padding: 32rpx 30rpx;
		background: #fff;
		border-radius: 24rpx;
		display: flex;
		align-items: flex-start;
		margin-bottom: 32rpx;

		.left-img {
			width: 254rpx;
			height: 136rpx;
			background: skyblue;
			border-radius: 16rpx;
		}

		.right-block {
			// margin-left: 32rpx;

			.txt-option {
				font-weight: 500;
				font-size: 28rpx;
				color: #2f2525;
				line-height: 1.5em;
			}

			.txt-tag {
				margin-top: 28rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(25, 31, 38, 0.4);
			}
		}
	}
}

.fixed-right-block {
	position: fixed;
	bottom: 90rpx;
	right: 32rpx;
	z-index: 999;

	.fixed-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 88rpx;
		height: 88rpx;
		box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(255, 127, 23, 0.4);
		border-radius: 50%;
	}

	.txt-option {
		font-size: 20rpx;
		color: #ffffff;
		transform: scale(0.7);
	}

	.yuyin {
		background: #ff7f17;

		.img-icon {
			width: 32rpx;
			height: 46rpx;
		}
	}

	.message {
		background: #3e6bef;

		.img-icon {
			width: 34rpx;
			height: 34rpx;
		}
	}
}
</style>
